<template>
  <div class="mode-wrap">
    <div
      v-for="(item, index) in modeData"
      :key="index"
      :class="{ 'is-active': currentMode === _Mode[index] }"
      @click="toggleMode(index)"
    >
      <el-icon>
        <component :is="item" />
      </el-icon>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineEmits, defineProps, ref, watch } from 'vue'

import { Mode } from './index'
import { Grid, List } from '@element-plus/icons'
const modeData = [Grid, List]

const _Mode = Mode

const currentMode = ref('')

const props = defineProps({
  modelValue: {
    type: String,
    default: Mode[Mode.Grid],
  },
})

watch(
  () => props.modelValue,
  (val) => {
    currentMode.value = val
  },
  {
    immediate: true,
  }
)

const emits = defineEmits(['update:modelValue'])
const toggleMode = (index: number) => {
  currentMode.value = Mode[index]
  emits('update:modelValue', currentMode.value)
}
</script>

<style lang="scss" scoped>
.mode-wrap {
  display: inline-flex;
  vertical-align: middle;
  border-radius: 4px;

  & > div {
    display: flex;
    height: 28px;
    padding: 0 10px;
    line-height: 28px;
    cursor: pointer;
    background: gray;
    border: 1px solid #666;
    border-right: 0;
    border-left: 0;
    align-items: center;
    justify-content: center;

    &.is-active {
      color: white;
      background: #666;
    }

    &:first-child {
      border-left: 1px solid #666;
      border-radius: 4px 0 0 4px;
    }

    &:last-child {
      border-right: 1px solid #666;
      border-radius: 0 4px 4px 0;
    }
  }

  .el-icon {
    font-size: 18px;
  }
}
</style>
